<template>
  <div class="card">
    <div class="header-info">
      <p class="time">{{ course.schoolYear }} 第{{ course.term === 1 ? '一' : '二' }}学期</p>
      <h3 class="name" @click="toCourseDetail">{{ course.courseName }}</h3>
      <p class="chapter">{{ course.details === "无" ? '' : course.details }}</p>
      <!--处理有无课程信息的 margin-->
      <div class="qrcode" v-if="course.details === '' || course.details === '无'">
        <img src="../../static/course/qr.svg" alt="qr">
        <el-dropdown trigger="click" v-if="showType === 0">
          <span class="el-dropdown-link" style="color: #fff">
            课程码 {{ course.courseCode }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="display: block">停用</el-dropdown-item>
            <el-dropdown-item style="display: block">重置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span v-if="showType === 1">课程码 {{ course.courseCode }}</span>
      </div>
      <div class="qrcode" style="margin-top: 15px" v-else>
        <img src="../../static/course/qr.svg" alt="qr">
        <el-dropdown trigger="click" v-if="showType === 0">
          <span class="el-dropdown-link" style="color: #fff">
            课程码 {{ course.courseCode }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="display: block">停用</el-dropdown-item>
            <el-dropdown-item style="display: block">重置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span v-if="showType === 1">课程码 {{ course.courseCode }}</span>
      </div>

    </div>
    <div class="content-info">
      <h3 class="work">
        <span>近期作业</span>
      </h3>
      <div class="des">
        <p class="text_overflow1" v-for="(item, index) in recentTasks" :key="index" @click="toRecentTask(item.id)">
          {{ item.title }}</p>
      </div>
    </div>
    <div class="user-info">
      <div class="left" @click="toMember">
        成员{{ course.totalNumber }}人
      </div>
      <div class="right">
        <div class="set-top">
          <img src="../../static/course/top.svg" alt="top">
          置顶
        </div>
        <el-dropdown class="handle" trigger="click" v-if="showType === 0" placement="top-end">
          <span class="el-dropdown-link">
            <img src="../../static/course/etc.svg" alt="etc" width="14px">
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="display: block">
              <div @click="deleteCourseVisible = true">删除</div>
            </el-dropdown-item>
            <el-dropdown-item style="display: block">
              <div @click="setEditCourse">编辑</div>
            </el-dropdown-item>
            <el-dropdown-item style="display: block">归档</el-dropdown-item>
            <el-dropdown-item style="display: block">复制课程</el-dropdown-item>
            <el-dropdown-item style="display: block">打包下载</el-dropdown-item>
            <el-dropdown-item style="display: block">转让</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown class="handle" trigger="click" v-if="showType === 1" placement="top-end">
          <span class="el-dropdown-link">
            <img src="../../static/course/etc.svg" alt="etc" width="14px">
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="display: block">
              <div @click="quitCourse">退课</div>
            </el-dropdown-item>
            <el-dropdown-item style="display: block">归档</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dialog
          title="提示"
          :visible.sync="deleteCourseVisible"
          width="30%">
          <span>您将要删除课程 <span style="color: #409eff;font-size: 38px;">{{ course.courseName }}</span>，<span
            style="color: red">注意该操作无法撤销</span></span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="deleteCourseVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteCourse">确 定</el-button>
          </span>
        </el-dialog>

        <el-dialog
          title="编辑课程"
          :visible.sync="editCourseVisible"
          width="70%"
          style="text-align: left">
      <span>
        <el-tabs v-model="infoType" @tab-click="">
          <el-tab-pane label="基本信息（必填）" name="first">
            <el-form :model="editCourse" :rules="rules" ref="editCourse" label-width="120px" class="demo-ruleForm">
              <el-form-item label="课程名称" prop="courseName">
                <el-input
                  v-model="editCourse.courseName"
                  maxlength="30"
                  show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="教学班级" prop="clazz">
                <el-input
                  v-model="editCourse.clazz"
                  maxlength="20"
                  show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="选择学年" prop="schoolYear">
                <el-select v-model="editCourse.schoolYear" placeholder="请选择学年">
                  <el-option
                    v-for="item in schoolYearOptions"
                    :key="item.schoolYear"
                    :label="item.schoolYear"
                    :value="item.schoolYear"
                    style="display: block">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="请选择学期" prop="term">
                <el-select v-model="editCourse.term" placeholder="请选择学期">
                  <el-option
                    v-for="item in courseTermOptions"
                    :key="item.term"
                    :label="item.term"
                    :value="item.value"
                    style="display: block">
                  </el-option>
                </el-select>
              </el-form-item>
              <span class="senior-set" @click="moreInfoVisible = !moreInfoVisible">
                更多信息
                <i class="el-icon-arrow-down" :style="{display: moreInfoVisible ? 'none' : 'inline-block'}"></i>
                <i class="el-icon-arrow-up" :style="{display: moreInfoVisible ? 'inline-block' : 'none'}"></i>
              </span>
              <div v-if="moreInfoVisible" class="none-view">
                <div class="line-desc">
                  <div class="TeachingRadio">
                    <span>授课模式</span>
                    <p>
                      <el-radio-group v-model="editCourse.model">
                        <el-radio :label="0">线上</el-radio>
                        <el-radio :label="1">线下</el-radio>
                        <el-radio :label="2">混合</el-radio>
                      </el-radio-group>
                    </p>
                  </div>
                  <div class="TeachingTimer">
                    <span>学时数</span>
                      <div class="TeachingTimer-select">
                        <div class="TeachingTimer-input">
                          <input type="number" min="0" placeholder="请输入学时" v-model="editCourse.period">
                        </div>
                      </div>
                  </div>
                </div>
                <div class="courseIntro">
                  <h2 class="mb12">课程介绍</h2>
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="editCourse.details">
                  </el-input>
                </div>
                <div class="classAddress">
                  <label class="flex-align">
                    <span>授课地点</span>
                    <el-input style="flex: 1 1 0%" v-model="editCourse.place"></el-input>
                  </label>
                </div>
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="高级设置" name="second">高级设置</el-tab-pane>
        </el-tabs>
      </span>
          <span slot="footer" class="dialog-footer">
        <el-button @click="resetEditCourseForm('editCourse')">取 消</el-button>
        <el-button type="primary" @click="submitEditCourse('editCourse')">确 定</el-button>
      </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {mymessage} from "../tools/mymessage";

export default {
  name: "CourseCard",
  props: {
    course: {
      type: Object
    },
    showType: {
      type: Number
    }
  },
  data() {
    return {
      deleteCourseVisible: false,
      editCourseVisible: false,
      infoType: 'first',
      editCourse: {
        courseName: "",
        clazz: "",
        schoolYear: "",
        term: '',
        place: '',
        details: "",
        model: '',
        period: ''
      },
      schoolYearOptions: [
        {
          schoolYear: '2022-2023'
        },
        {
          schoolYear: '2021-2022'
        },
        {
          schoolYear: '2020-2021'
        },
        {
          schoolYear: '2019-2020'
        },
        {
          schoolYear: '2018-2019'
        },
        {
          schoolYear: '2017-2018'
        }
      ],
      courseTermOptions: [
        {
          term: '第一学期',
          value: 1
        },
        {
          term: '第二学期',
          value: 2
        }
      ],
      moreInfoVisible: false,
      rules: {
        courseName: [
          {required: true, message: '必填项', trigger: 'blur'}
        ],
        clazz: [
          {required: true, message: '必填项', trigger: 'blur'}
        ],
        schoolYear: [
          {required: true, message: '必填项', trigger: 'blur'}
        ],
        term: [
          {required: true, message: '必填项', trigger: 'blur'}
        ]
      },
      recentTasks: [
        {
          courseId: -1,
          details: "",
          endTime: "",
          id: "",
          label: "",
          startTime: "",
          status: -1,
          step: -1,
          title: "",
          totalScore: -1
        }
      ]
    }
  },
  methods: {
    toCourseDetail() {
      this.$store.commit('SAVA_CURRENT_COURSE_ID', this.course.id)
      this.$router.push({name: 'courseDetail', params: {id: this.course.id}})
    },
    deleteCourse() {
      this.deleteCourseVisible = false

      this.deleteRequest('/course/delete/' + this.course.id).then(resp => {
        console.log(resp);
        if (resp.code === 200) {
          mymessage.success("删除课程成功")
          this.$emit('function', 'delete')
        }
      })
    },
    submitEditCourse(editCourseForm) {
      this.$refs[editCourseForm].validate(valid => {
        if (valid) {
          console.log(this.editCourse);
          this.putRequest('/course/update', this.editCourse).then(resp => {
            console.log("resp", resp);
            if (resp.code === 200) {
              this.resetEditCourseForm(editCourseForm)
              mymessage.success("修改课程信息成功")

              this.$emit('function', 'edit')
            } else {
              mymessage.error("创建课程失败")
            }
          })
        } else {
          return false
        }
      })
    },
    resetEditCourseForm(editCourseForm) {
      this.editCourseVisible = false
      this.moreInfoVisible = false
      this.$refs[editCourseForm].resetFields();
    },
    setEditCourse() {
      this.editCourse = this.course
      this.editCourseVisible = true
    },
    quitCourse() {
      this.$confirm('请确认是否退出课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/course/quitCourse/' + this.course.id + '/' + this.$store.getters.userInfo.id).then(resp => {
          if (resp.code === 200) {
            mymessage.success("退课成功")
            this.$emit('function', 'quit')
          }
        })
      }).catch(() => {
        mymessage.info('取消退课')
      });
    },
    toMember() {
      this.$store.commit('SAVA_CURRENT_COURSE_ID', this.course.id)
      this.$router.push('/courseList/member')
    },
    toRecentTask(taskId) {
      this.$store.commit('SAVA_CURRENT_COURSE_ID', this.course.id)
      this.$store.commit('SAVA_CURRENT_TASK_ID', taskId)
      this.$router.push('/courseList/courseDetail')
    }
  },
  created() {
    this.recentTasks = this.course.recentTasks
  },
/*  watch: {
    recentTasks(newName, oldName) {
      console.log("newName", newName)
      console.log("oldName", oldName)
      this.recentTasks = newName
    }
  }*/
}
</script>

<style scoped>
.card {
  margin: 11px;
  width: 255px;
  height: 308px;
  background: #fff;
  border: 1px solid #e2e6ed;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.header-info {
  cursor: pointer;
  padding: 18px 24px;
  height: 122px;
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  background-image: url("https://assets.ketangpai.com/theme/min/01.jpg");
}

.header-info .time {
  opacity: .6;
  font-size: 13px;
  text-align: left;
}

.header-info .name {
  margin-top: 3px;
  font-size: 20px;
  line-height: 32px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #fff;
}

.text_overflow1, .text_overflow2 {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: normal;
  -webkit-box-orient: vertical;
}

.header-info .chapter {
  font-size: 16px;
  line-height: 24px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #fff;
}

.header-info .qrcode {
  margin-top: 40px;
  display: flex;
  position: relative;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #fff;
  line-height: 16px;
}

.header-info .qrcode img {
  display: block;
  width: 14px;
  margin-right: 8px;
}

.content-info {
  height: 96px;
  padding: 0 20px 16px 20px;
}

.content-info .work {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-between;
}

.content-info .des p {
  margin-top: 8px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #3c4043;
  cursor: pointer;
}

.content-info .des p {
  font-size: 14px;
  line-height: 20px;
}

.user-info {
  border-top: 1px solid #dadce0;
  display: flex;
  justify-content: space-between;
  height: 21px;
  padding: 8px 14px;
  font-size: 12px;
  line-height: 21px;
}

.user-info .left {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.user-info .right {
  display: flex;
  align-items: center;
}

.user-info .right .handle {
  cursor: pointer;
  margin-left: 11px;
}

.user-info .right .set-top {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.user-info .right .set-top img {
  display: block;
  width: 14px;
  margin-right: 4px;
}

.senior-set {
  color: #2092e6;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
  display: block;
}

.none-view {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 15px;
}

.none-view .line-desc {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.TeachingRadio {
  display: flex;
  align-items: center;
  margin-right: 50px;
  color: #3c4043;
  font-size: 14px;
}

.TeachingRadio > span {
  margin-right: 15px;
}

.TeachingTimer {
  display: flex;
  align-items: center;
}

.TeachingTimer > span {
  color: #3c4043;
  font-size: 14px;
  margin-right: 8px;
}

.TeachingTimer .TeachingTimer-select {
  position: relative;
}

.TeachingTimer .TeachingTimer-select .TeachingTimer-input {
  width: 110px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dadce0;
  border-radius: 4px;
  background: #fff;
}

.TeachingTimer .TeachingTimer-select .TeachingTimer-input input {
  width: 100px;
  outline: none;
  color: #afb1b3;
  font-size: 12px;
}

.mb12 {
  margin-bottom: 12px;
}

.classAddress {
  margin-top: 18px;
}

.flex-align {
  display: flex;
  align-items: center;
}

.classAddress span {
  margin-right: 20px;
}
</style>
